<template>
  <div class="nav-container">
    <div class="container">
      <div class="left">
        <ul>
          <li v-for="(item, i) in navlslt" :key="i">
            <a href="">{{ item }}</a>
          </li>
        </ul>
        <div class="zsx">>&ensp;&ensp;|</div>
        <div class="gengx"><a href="">更新</a></div>
      </div>
      <div class="right">
        <div class="search">
          <input type="text" placeholder="明日方舟：罗德厨房..." />
          <img src="../assets/icon1.png" alt="" />
        </div>
        <ul>
          <li v-for="(item, i) in navlsrt" :key="i">
            <a href="">{{ item }}</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      navlslt: ["冒险", "热血", "搞笑", "恋爱", "少女", "分类"],
      navlsrt: ["下载APP", "历史", "追漫"],
    };
  },
};
</script>

<style scoped lang="less">
.nav-container {
  border-bottom: 2px solid gray;
}
.container {
  display: flex;
  justify-content: space-between;
  width: 1160px;
  margin: 0 auto;
  height: 50px;
  line-height: 50px;
  .left {
    display: flex;
    ul {
      width: 300px;
      justify-content: space-between;
      margin-right: 8px;
    }
    .gengx {
      margin-left: 20px;
    }
    .zsx {
      color: #ccc;
    }
  }
  .right {
    display: flex;
    ul {
      width: 180px;
      justify-content: space-between;
      margin-left: 50px;
    }
  }
  ul {
    display: flex;
  }
  .search {
    position: relative;
    img {
      width: 20px;
      height: 20px;
      position: absolute;
      right: 10px;
      top: 17px;
      cursor: pointer;
    }
    input {
      border: none;
      outline: none;
      background: #ccc;
      padding: 8px;
      border-radius: 100px;
    }
  }
}
</style>